.ring-loading{
  margin:0px auto; width: 120px ; height:120px ; position: relative;
  .progress{position: absolute; width: 114px; height:114px; background: @fill-base; border-radius: 50%; left: 50%; top: 50%;transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);line-height: 112px;text-align: center;color: @color-text-selected;font-size: @font-size-caption-sm}
  .ring-left,.ring-right{width: 60px;height: 120px;overflow: hidden; position: relative; float: left;}
  .ring-left{ border-radius: 120px 0 0 120px;}
  .ring-right{ border-radius: 0 120px 120px 0;}
  .ring-left .left-shadow,.ring-right .right-shadow{content:"";  position:absolute; display:block; width: 60px;height: 120px;border-radius: 120px 0 0 120px;background-color: @color-text-selected;}
  .ring-right .right-shadow{content:"";  position:absolute; display:block;   border-radius: 0 120px 120px 0; }
  @-webkit-keyframes rotateB{
    0%{-webkit-transform:rotateZ(180deg)}
    25%,50%{-webkit-transform:rotateZ(360deg);}
    75%,100%{-webkit-transform:rotateZ(540deg);}
  }
  @-webkit-keyframes rotateA{
    0%,25%{-webkit-transform:rotateZ(180deg);}
    50%,75%{-webkit-transform:rotateZ(360deg);}
    100%{-webkit-transform:rotateZ(540deg);}
  }


  @keyframes rotateB{
    0%{transform:rotateZ(180deg)}
    25%,50%{transform:rotateZ(360deg);}
    75%,100%{transform:rotateZ(540deg);}
  }
  @keyframes rotateA{
    0%,25%{transform:rotateZ(180deg);}
    50%,75%{transform:rotateZ(360deg);}
    100%{transform:rotateZ(540deg);}
  }
  .ring-left .left-shadow{-webkit-animation:rotateA 2s infinite linear; -webkit-transform-origin:right center; animation:rotateA 2s infinite linear; transform-origin:right center;  }
  .ring-right .right-shadow{-webkit-animation:rotateB 2s infinite linear; -webkit-transform-origin:left center;animation:rotateB 2s infinite linear; transform-origin:left center;}
  .ring-ball-circular{
    position: absolute;width: 100%;height: 100%;top:0;left:0;z-index:60;-webkit-animation:rotateball 1s infinite linear;animation:rotateball 1s infinite linear;
    .ring-ball{width: 10px;height: 10px;border-radius: 100%;position: absolute;top:-4px;left:50%;margin-left: -4px;background: #ff8741;}
  }
  @-webkit-keyframes rotateball{
    0%{-webkit-transform:rotateZ(0deg);}
    100%{-webkit-transform:rotateZ(360deg);}
  }

  @keyframes rotateball{
    0%{transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
  }
  .bottom-ring-bg{position: absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius: 100%;}
}
